<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Xiao Huan云笔记</title>
    <link rel="icon" type="shortcut icon" href="/img/favicon.png">
    <link rel="stylesheet" href="/editorMd-master/css/editormd.min.css">
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/css/noteDetail.css">
    <link rel="stylesheet" href="/css/noteCommon.css"/>
    <link rel="stylesheet" href="/css/animate.css" />
    <!-- 动画精灵的配置-->
    <script src="https://l2dwidget.js.org/lib/L2Dwidget.min.js"></script>
</head>
<!-- 在之外创建textArea存放返回的数据-->
<textarea id="originText" style="display: none">[[${note.noteContent}]]</textarea>
<body>
<div class="nav">
    <!--   头部导航 navigator     -->
    <a href="/sys/toIndex"><img src="/img/CfengNet.png" alt="logo"></a>
    <span class="logoTitle animated headShake">Xiao Huan CloudNote</span>
    <!-- 无意义的，为了撑开布局空间 -->
    <span class="spacer" style="width: 63%"></span>
    <a href="javascript:void(0)" id="fullScreen" title="全屏"><i class="layui-icon layui-icon-screen-full"></i></a>
    <a href="/sys/toNote">Cloud主页</a>
    <a href="/sys/toNoteEdit">写笔记</a>
    <a href="/sys/toIndex" >返回首页</a>
</div>
<div class="container">
    <!--  内容区-->
    <div class="container-left">
        <!--  左侧个人信息-->
        <div class="card">
            <img th:src="@{${chatUser.userHeaderImg}}" alt="headImg" class="avatar">
            <h3>[[${chatUser.userName}]]</h3>
            <a href="https://gitee.com/zhang-junning-huan" target="_blank">Git地址</a>
            <!--                新的浏览器窗口打开新链接-->
            <div class="counter">
                <span>文章</span>
                <span>分类</span>
            </div>
            <div class="counter">
                <span>[[${noteNumber}]]</span>
                <span>2</span>
            </div>
        </div>

    </div>
    <div class="container-right">
        <!-- 文章编辑-->
        <div class="note-nav">
            <a th:href="@{/sys/updateNote/{noteId}(noteId=${note.id})}">编辑</a>
            <a href="javascript:void(0)" onclick="deleteNote()">删除</a>
        </div>
        <!--  文章正文  -->
        <div class="note-content">
            <h3>[[${note.noteTitle}]]</h3>
            <div class="date" th:text="${#temporals.format(note.noteCreateTime,'yyyy-MM-dd HH:mm:ss')}"></div>
            <!-- 进行转换-->
            <div id="editorMdArea">
                <!-- 动态创建-->
<!--                <textarea id="content" style="display: none"></textarea>-->
            </div>
        </div>
    </div>

    <script src="/js/JQuerym.js"></script>
    <script src="/editorMd-master/lib/marked.min.js"></script>
    <script src="/editorMd-master/lib/prettify.min.js"></script>
    <script src="/editorMd-master/lib/raphael.min.js"></script>
    <script src="/editorMd-master/lib/underscore.min.js"></script>
    <script src="/editorMd-master/lib/sequence-diagram.min.js"></script>
    <script src="/editorMd-master/lib/flowchart.min.js"></script>
    <script src="/editorMd-master/lib/jquery.flowchart.min.js"></script>
    <script src="/editorMd-master/editormd.js"></script>
    <script type="application/javascript">
        //页面加载时创建
        $(function() {
            //为展示div添加动态的隐藏标签
            $("#editorMdArea").html("<textarea id=\"content\" style=\"display: none\"></textarea>");
            //需要转化的md内容附加到容器
            $("#content").val($("#originText").val());
            // console.log($("#originText").val());
            //使用editor转化
            editormd.markdownToHTML("editorMdArea", {
                htmlDecode: "style,script,iframe", //过滤标签
                emoji: true,
                taskList: true,
                tex: true,
                flowChart: true,
                sequenceDiagram: true,
            });
        })

        var title = "[[${note.noteTitle}]]";
        //删除文章，提交deleteMapping
        deleteNote = function () {
            //发起delete请求
            if(window.confirm("确定要删除吗？不可恢复")) {
                $.ajax({
                    url : "/note/" + title,
                    type : "DELETE",
                    data : {},
                    success : function(result) {
                        alert(result.data);
                        location.href = "/sys/toNote";
                    }
                });
            }
        }

        $('#fullScreen').click(function () {
            var v = "layui-icon-screen-full", p = "layui-icon-screen-restore";
            var n = $(this).find("i");
            var s = document.fullscreenElement || document.msFullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || false;
            if (s) {
                var r = document.exitFullscreen || document.webkitExitFullscreen || document.mozCancelFullScreen || document.msExitFullscreen;
                if (r) {
                    r.call(document)
                } else {
                    if (window.ActiveXObject) {
                        var u = new ActiveXObject("WScript.Shell");
                        u && u.SendKeys("{F11}")
                    }
                }
                n.addClass(v).removeClass(p)
            } else {
                var o = document.documentElement;
                var q = o.requestFullscreen || o.webkitRequestFullscreen || o.mozRequestFullScreen || o.msRequestFullscreen;
                if (q) {
                    q.call(o)
                } else {
                    if (window.ActiveXObject) {
                        var u = new ActiveXObject("WScript.Shell");
                        u && u.SendKeys("{F11}")
                    }
                }
                n.addClass(p).removeClass(v)
            }
        });
    </script>
    <script type="text/javascript">
        //角色数组
        var characters = ['chitose','Epsilon2.1','Gantzert_Felixander','haru01','haru02','haruto','hibiki','hijiki','izumi','koharu','miku','nico','ni-j','nipsilon','nito','shizuku','tororo','tsumiki','Unitychan','wanko','z16'];

        //随意选择其中一个
        var petName = characters[15];

        var articleTitle = $(".note-content>h3").text();
        L2Dwidget.init({
            "model": {
                "jsonPath": "https://unpkg.com/live2d-widget-model-" + petName + "@1.0.5/assets/" + petName + ".model.json",
                "scale": 1
            },
            "display": {
                "position": "right",
                "width": 150,
                "height": 300,
                "hOffset": 0,
                "vOffset": -20
            },
            "mobile": {
                "show": true,
                "scale": 0.5
            },
            "react": {
                "opacityDefault": 0.8,
                "opacityOnHover": 1
            },
            "dialog": {
                "enable": true,
                "script": {
                    //每隔20s显示的句子
                    'every idle 20s': '$hitokoto$',
                    //悬浮在down类型标签显示的对话框
                    'hover .down': '星星在天上而你在我心里 (*/ω＼*),和好友开始聊天吧',
                    'hover .note-content': '这篇文章 《' + articleTitle +  '》 你觉得怎么样',
                    //触碰身体显示
                    'tap body': '哎呀！别碰我！',
                    //触碰脸显示
                    'tap face': '讨厌，快学习',
                }
            }
        });
    </script>
</body>
</html>
